<template>
    <div class="ac-menu">
      <Layout :style="{padding: '0 24px 24px'}">
        <Breadcrumb :style="{margin: '24px 0'}">
          <BreadcrumbItem><a href="javascript:void(0)" @click="jump('index')">首页</a></BreadcrumbItem>
          <BreadcrumbItem><a href="javascript:void(0)" @click="jump('ac')">鉴权中心</a></BreadcrumbItem>
          <BreadcrumbItem>权限菜单</BreadcrumbItem>
        </Breadcrumb>
        <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
          <div class="ac-header" ghost>
            <div class="ac-header-search">
              <span>搜索条件：</span>
              <Input v-model="search" placeholder="请输入权限菜单名称..." style="width: 300px"></Input>
              <Button @click="toSearch"><Icon type="md-search" />搜索</Button>
            </div>
            <Button @click="addDrawer=true"><Icon type="md-add" />新增</Button>
            <Button @click="toRefresh"><Icon type="md-sync" />刷新</Button>
          </div>
          <div class="ac-content">
            <Table :loading="loading" :height="666"  :columns="tb_columns" :data="acMenus" size="small"></Table>
            <Page :total="acMenus_total" :current="acMenus_current_page" :page-size="40" @on-change="onChange" @on-page-size-change="onPageSizeChange" show-total show-sizer size="small" style="float:right;margin-top:12px"/>
          </div>
        </Content>
      </Layout>
      <Drawer title="新增权限菜单" :closable="false" v-model="addDrawer" width="30" :mask-closable="false">
        <Form ref="addForm" :model="addForm" :rules="addRuleVal" :label-width="120">
          <FormItem label="router路由路径：" prop="path">
            <Input v-model="addForm.path" placeholder="请输入router路由路径..."></Input>
          </FormItem>
          <FormItem label="router路由名称：" prop="name">
            <Input v-model="addForm.name" placeholder="请输入router路由名称..."></Input>
          </FormItem>
          <FormItem label="router路由等级：" prop="menuLevel">
            <Select v-model="addForm.menuLevel" placeholder="请输入router路由等级...">
              <Option value="1">1</Option>
              <Option value="2">2</Option>
              <Option value="3">3</Option>
            </Select>
          </FormItem>
          <FormItem label="名称：" prop="menuName">
            <Input  v-model="addForm.menuName" placeholder="请输入名称..."></Input>
          </FormItem>
          <FormItem label="描述：" prop="menuDesc">
            <Input v-model="addForm.menuDesc" placeholder="请输入描述..."></Input>
          </FormItem>
        </Form>
        <div class="demo-drawer-footer">
          <Button type="primary" @click="handleSubmit('addForm')">提交</Button>
          <Button @click="handleReset('addForm')" style="margin-left: 8px">取消</Button>
        </div>
      </Drawer>
      <Drawer title="更新权限菜单" :closable="false" v-model="updateDrawer" width="30" :mask-closable="false">
        <Form ref="updateForm" :model="addForm" :rules="addRuleVal" :label-width="120">
          <FormItem label="router路由路径：" prop="path">
            <Input v-model="addForm.path" placeholder="请输入router路由路径..."></Input>
          </FormItem>
          <FormItem label="router路由名称：" prop="name">
            <Input v-model="addForm.name" placeholder="请输入router路由名称..."></Input>
          </FormItem>
          <FormItem label="router路由等级：" prop="menuLevel">
            <Select v-model="addForm.menuLevel" placeholder="请输入router路由等级...">
              <Option value="1">1</Option>
              <Option value="2">2</Option>
              <Option value="3">3</Option>
            </Select>
          </FormItem>
          <FormItem label="名称：" prop="menuName">
            <Input  v-model="addForm.menuName" placeholder="请输入名称..."></Input>
          </FormItem>
          <FormItem label="描述：" prop="menuDesc">
            <Input v-model="addForm.menuDesc" placeholder="请输入描述..."></Input>
          </FormItem>
        </Form>
        <div class="demo-drawer-footer">
          <Button type="primary" @click="handleSubmit2('updateForm')">提交</Button>
          <Button @click="handleReset('updateForm')" style="margin-left: 8px">取消</Button>
        </div>
      </Drawer>
    </div>
</template>

<script>
  import {mapGetters,mapActions} from 'vuex';
  import {toGet,toPost} from "../../utils/MyAxios";
    export default {
        name: "ac-menu",
      data() {
        return {
          loading:false,
          addForm:{},
          showPwd:false,
          switch1:false,
          updateDrawer:false,
          addRuleVal:{
            path: [
              { required: true, message: '请输入router路由路径', trigger: 'blur' }
            ],
            name: [
              { required: true, message: '请输入router路由名称', trigger: 'blur' }
            ],
            menuLevel: [
              { required: true, message: '请输入router路由等级', trigger: 'blur' }
            ],
            menuName: [
              { required: true, message: '请输入名称', trigger: 'blur' }
            ],
            menuDesc: [
              { required: true, message: '请输入描述', trigger: 'blur' }
            ]
          },
          addDrawer:false,
          search:'',
          tb_columns: [
            {
              title: 'ID',
              key: 'id',
              align: 'center'
            },
            {
              title: '路由名称',
              key: 'name',
              align: 'center'
            },
            {
              title: '路由路径',
              key: 'path',
              align: 'center'
            },
            {
              title: '路由等级',
              key: 'menuLevel',
              align: 'center'
            },
            {
              title: '名称',
              key: 'menuName',
              align: 'center'
            },
            {
              title: '描述',
              key: 'menuDesc',
              align: 'center'
            },
            {
              title: '操作',
              align: 'center',
              render: (h, params) => {
                return h('div', [
                  h('Button', {
                    props: {
                      icon: 'md-create',
                      size: 'small'
                    },
                    style: {
                      color: 'black',
                    },
                    on: {
                      click: () => {
                        this.toUpdate(params.row.id)
                      }
                    }
                  }),
                  h('Button', {
                    props: {
                      icon: 'md-trash',
                      size: 'small'
                    },
                    style: {
                      color: 'black',
                    },
                    on: {
                      click: () => {
                        this.toDel(params.row.id)
                      }
                    }
                  })
                ]);
              }
            }
          ],
        }
      },
      computed: {
        ...mapGetters(['acMenus','acMenus_total','acMenus_current_page','acMenus_page_size']),
      },
      methods: {
        ...mapActions(['getAcMenu']),
        toRefresh(){
          this.getAcMenu({
            'search':this.search,
            'currentPage':this.acMenus_current_page,
            'pageSize':this.acMenus_page_size
          });
        },
        handleSubmit (name) {
          this.$refs[name].validate((valid) => {
            if (valid) {
                this.loading=true;
                let params = {
                  path:this.addForm.path,
                  name: this.addForm.name,
                  menuLevel:this.addForm.menuLevel,
                  menuName :this.addForm.menuName,
                  menuDesc:this.addForm.menuDesc,
                };
                toPost('/authentication/menu/add',params)
                  .then(res=>{
                    if (res.resultCode === 0) {
                      this.$Notice.success({
                        title: '新增权限菜单成功'
                      });
                      this.addDrawer=false;
                      this.toRefresh();
                      this.$refs[name].resetFields();
                    }else{
                      this.$Notice.error({
                        title: '新增权限菜单失败',
                        desc: '服务器发生未知错误'
                      })
                    }
                  });
                this.loading=false;
            }
          })
        },
        handleSubmit2 (name) {
          this.$refs[name].validate((valid) => {
            if (valid) {
                this.loading=true;
                let params = {
                  id:this.addForm.id,
                  path:this.addForm.path,
                  name: this.addForm.name,
                  menuLevel:this.addForm.menuLevel,
                  menuName :this.addForm.menuName,
                  menuDesc:this.addForm.menuDesc,
                };
                toPost('/authentication/menu/update',params)
                  .then(res=>{
                    if (res.resultCode === 0) {
                      this.$Notice.success({
                        title: '修改权限菜单信息成功'
                      });
                      this.updateDrawer=false;
                      this.toRefresh();
                      this.$refs[name].resetFields();
                    }else{
                      this.$Notice.error({
                        title: '修改权限菜单信息失败',
                        desc: '服务器发生未知错误'
                      })
                    }
                  });
                this.loading=false;
            }
          })
        },
        handleReset (name) {
          this.addDrawer=false;
          this.updateDrawer=false;
          this.$refs[name].resetFields();
        },
        onChange(currentPage){
          this.getAcMenu({
            'search':this.search,
            'currentPage':currentPage*1,
            'pageSize':this.acMenus_page_size
          });
        },
        onPageSizeChange(pageSize){
          this.getAcMenu({
            'search':this.search,
            'currentPage':this.acMenus_current_page,
            'pageSize':pageSize*1
          });
        },
        toSearch(){
          this.getAcMenu({
            'search':this.search,
            'currentPage':this.acMenus_current_page,
            'pageSize':this.acMenus_page_size
          });
        },
        toUpdate(id){
          toGet('/authentication/menu/queryOne/'+id)
            .then(res=>{
              if (res.resultCode === 0) {
                this.addForm=res.data;
                this.updateDrawer=true;
              }else{
                this.$Notice.warning({
                  title: '获取权限菜单信息失败',
                  desc: '服务器发生未知错误'
                });
              }
            });

        },
        toDel(id){
          swal({
            title: "您确定删除该权限菜单吗?",
            text: "删除该权限菜单后，系统将删除该权限菜单的所有信息!",
            icon: "warning",
            buttons: ["容我再想想!", "确认删除!"],
            dangerMode: true,
          })
            .then((willDelete) => {
              if (willDelete) {
                toGet('/authentication/menu/delete/'+id)
                  .then(res=>{
                    if (res.resultCode === 0) {
                      swal("删除成功!", {
                        icon: "success",
                      });
                      this.getAcMenu({
                        'search':this.search,
                        'currentPage':1,
                        'pageSize':20
                      });
                    }
                  })
                  .catch(error=>{
                    swal("删除失败!", {
                      icon: "error",
                    });
                  });
              }
            });
        }
      },
      mounted() {
        this.getAcMenu({
          'search':this.search,
          'currentPage':1,
          'pageSize':20
        });
      }
    }
</script>

<style lang="css" scoped>

</style>
